<template>
	<view class="info">
		<dwu-navbar title="个人资料"></dwu-navbar>
		<button class="profile-box" open-type="chooseAvatar" @chooseavatar="chooseavatar">
			<image class="profile" :src="info.avatar" mode=""></image>
			<image class="upload-icon" src="@/static/user/upload_icon.png" mode=""></image>
		</button>
		<view class="profile-tips">
			请上传头像
		</view>
		<view class="nickname">
			<view class="lable">
				我的昵称
			</view>
			<view class="value">
				<input type="nickname" v-model="info.nickname" @change="inputVal" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="nickname">
			<view class="lable">
				我的手机号
			</view>
			<view class="value">
				<input type="tel" v-model="info.mobile" :disabled="true" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="submit" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			};
		},
		onLoad() {
			this.userInfo()
		},
		methods: {
			userInfo() {
				this.request.http('/user/userInfo', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.info = data.data
						let dwuUserinfo = uni.getStorageSync('dwu_userinfo')
						dwuUserinfo.avatar = data.data.avatar
						dwuUserinfo.nickname = data.data.nickname
						dwuUserinfo.mobile = data.data.mobile
						uni.setStorageSync('dwu_userinfo',dwuUserinfo)
					}
				})
			},
			inputVal(e) {
				this.info.nickname = e.detail.value
			},
			chooseavatar(e) {
				this.upload.file('/Common/upload', e.detail.avatarUrl, 'file')
					.then(res => {
						uni.hideLoading()
						res = JSON.parse(res)
						console.log(res);
						if (res.code == 1) {
							uni.showToast({
								title: '上传成功'
							})
							this.info.avatar = res.data.fullurl
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					})
			},
			submit() {
				this.request.http('/user/profile', 'post', {
					avatar: this.info.avatar,
					nickname: this.info.nickname,
					mobile: this.info.mobile
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						this.userInfo()
					}
				})
				
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.info {
		.profile-box {
			position: relative;
			margin-top: 58rpx;
			box-sizing: border-box;
			background: transparent;

			&::after {
				border: none;
			}

			.profile {
				display: block;
				margin: 0 auto;
				width: 146rpx;
				height: 146rpx;
				background-color: #EBEBEB;
				border-radius: 50%;
			}

			.upload-icon {
				position: absolute;
				width: 70rpx;
				height: 66rpx;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}

		.profile-tips {
			margin-top: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 38rpx;
			text-align: center;
		}

		.nickname {
			margin: 48rpx auto;
			padding: 24rpx 32rpx;
			width: 704rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #474747;
				line-height: 38rpx;
			}

			.value {
				text-align: right;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #999999;
			}
		}

		.submit {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 650rpx;
			height: 104rpx;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 40rpx;
			color: #B0DD67;
			background: #3D3D3D;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 31rpx;
			color: #B0DD67;
			line-height: 104rpx;
			text-align: center;
		}

	}
</style>